<template>
  <view class="content">
    <van-tree-select
      :items="ListItem"
      :max="max"
      :main-active-index="active_index"
      :active-id="active_id_list"
      @click-nav="onClickNav"
      @click-item="onClickItem"
      selected-icon="success"
    />

    <view class="btn" style="display: flex;justify-content: space-between;align-items: center;">
			<view  class="button button--bird" @click="enter_dream">
				<div class="button__wrapper">
					<span class="button__text">ENTER</span>
				</div>
				<div class="birdBox">
					<div class="bird wakeup">
						<div class="bird__face"></div>
					</div>
					<div class="bird wakeup">
						<div class="bird__face"></div>
					</div>
					<div class="bird">
						<div class="bird__face"></div>
					</div>
				</div>
			</view>
			<view class="clean">所有梦想清空</view>
		</view>


    <view class="box" style="position: relative;">
      <view class="main">
        <view class="item" v-for="(item,index) in dreamList" :key="index">
          <view class="item_header" style="text-align: center;">
						梦想{{item.index + 1}} 
						<van-icon name="close" style="#ccc;transform: translateX(20rpx);" />
					</view>
          <view class="item_main">{{item.value}} </view>
          <view class="item_footer" style="font-size: 20rpx;">许愿人 xxx  实现时间 2023.10.1</view>
        </view>
			
      </view>
      <view class="main_2" :style=" {height: getHeight} "></view>
    </view>
   

  </view>
</template>

<script>
export default {
  data(){
    return{
      max:3,
      active_index:0,// 左侧选中项的索引
      active_id_list: [] , // 右侧选中项的id 
      ListItem:[
        {
          text:'美食',
          children: [
            {text: '首选海底捞火锅,(推荐上海的火烧云)', id: 1,},
            {text: '炸鸡&可乐',id: 2,},
            {text: '烧烤&啤酒(麻辣小龙虾偶的最爱)',id: 3,},
            {text: '海鲜大作战',id: 4,},
            {text: '都没有 联系作者把!',id: 5,},
          ],
        },
        {
          text:'奶茶',
          children: [
            {text: '茶百道', id: 1,},
            {text: '霸王别姬',id: 2,},
            {text: '蜜雪冰城',id: 3,},
            {text: '益禾堂',id: 4,},
            {text: '上面这几个已经把作者的CPU干烧焦了,仅供参考,具体请打开你们的美团! 嘻嘻',id: 5,},
          ],
        },
        {
          text:'旅游城市(计划中的)',
          children: [
            {text: '上海(如果要来上海或周边,请联系作者)!', id: 1,},
            {text: '西安',id: 2,},
            {text: '洛阳',id: 3,},
            {text: '长沙',id: 4,},
            {text: '杭州(包括但不限于台州/温州...)',id: 5,},
            {text: '南京',id: 6,},
          ],
        },
      ],
      index:0 ,// 人造索引 
      dreamNav:'美食', // 梦想左侧大类
      dreamNav_2:'', // 设计的算法 (左侧大类)
      dreamItem:[], // 每次点击右侧的暂存
      dreamList:[] , // 选择的梦想清单 终极版
			isrepeat:false , // 是否重复选择了
    }
  },
	onLoad(){
			this.dreamList = JSON.parse(uni.getStorageSync('dreamList'))
			console.log('onload里的',this.dreamList);
			this.index = this.dreamList.length
			// this.dreamList.map(item=>{
			// 	item
			// })
	},
  methods:{
    // 导航点击事件
    onClickNav(e){
      console.log('导航',e.detail.index);
      this.active_index = e.detail.index
      this.active_id_list = []
      if(this.active_index === 0){
        this.dreamNav = '美食'
        this.dreamNav_2 = '城市'
      }else if (this.active_index === 1){
        this.dreamNav = '奶茶'
        this.dreamNav_2 = '美食'
      }else if (this.active_index === 2){
        this.dreamNav = '城市'
        this.dreamNav_2 = '奶茶'
      }
      console.log('this.active_index',this.active_index);
      console.log('this.dreamItem',this.dreamItem);
      // 有值才存
      if(this.dreamItem.length !== 0 ){
        const res = {
          index:this.index,
          type:this.dreamNav_2,
          value:this.dreamItem
        }
				this.dreamList.map(item=>{
					if(item.type === res.type){
						console.log('重复选择了');
						console.log('item', item, 'res', res);
						item.value = res.value
						this.isrepeat = true
					}
					return item
				})

				if(!this.isrepeat){
					console.log('没有重复选择');
					this.dreamList.push(res)
				}
        
        console.log('this.dreamList',this.dreamList);
				uni.setStorageSync('dreamList', JSON.stringify(this.dreamList))
        this.index++
        this.dreamItem = []
      }
    },
    // 点击确定
    enter_dream(){
      uni.showToast({
        title:'不点我,没办法保存最后一个梦想!',
        icon:'none'
      })
      if(this.dreamItem.length !== 0 ){
        const res = {
          index:this.index,
          type:this.dreamNav,
          value:this.dreamItem
        }
        this.dreamList.push(res)
        console.log('this.dreamList',this.dreamList);
				uni.setStorageSync('dreamList', JSON.stringify(this.dreamList))
        this.index++
        this.dreamItem = []
      }
    },
    onClickItem(e){
      console.log('子项',e.detail);
      const index =  this.active_id_list.indexOf(e.detail.id);
      if (index > -1) {
        this.active_id_list.splice(index, 1);
      } else {
        this.active_id_list.push(e.detail.id);
        // 有值才存
        if(e.detail.text){
          this.dreamItem.push(e.detail.text)
        }
        
        // console.log(this.dreamItem);
      }

      if(this.active_id_list.length === 3){
        uni.showToast({
          title:'最多选择3个',
          icon:'none'
        })
      }
      // console.log(this.active_id_list);
    }
  },
  computed:{
    getHeight(){
      const height = uni.createSelectorQuery().in(this).select('.main').boundingClientRect(data => {
        console.log(data.height,'main的高度');
        return data.height
      }).exec();
      return height
    }
  }
}
</script>

<style>
.main{
  width: 93%;
  border: 2rpx solid #000;
  height: 500rpx;
  border-radius: 32rpx;
  position: absolute;
  top: 0;
  z-index: 99;
  box-sizing: border-box;
  padding: 40rpx;
	display: flex;
}
.main_2{
  width: 93%;
  border: 2rpx solid #000;
  height: 500rpx;
  border-radius: 32rpx;
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  background-color: #f7f8fa
}

.button--bird{
			--main_color: #f4cf47;
			--sub_color1: #f4e19c;
			--sub_color2: #ff8108;
			--base_color: #000;
			--border_radius1: 60px 60px 40px 40px / 48px 48px 30px 30px;
			--border_radius2: 70px 70px 40px 40px / 48px 48px 30px 30px;
			--border_radius3: 40px 40px 40px 40px / 48px 48px 30px 30px;
	}


	.button {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 70%;
			box-sizing: border-box;
			/* width: 280px;
			height: 80px; */
      margin: 60rpx 0;
			text-decoration: none;
			border: solid 3px #000;
			border-radius: 40px;
			background: var(--main_color);
			position: relative;
	}

	.button__wrapper{
			display: flex;
			justify-content: center;
			align-items: center;

			width: 100%;
			height: 100%;

			border-radius: 40px;

			overflow: hidden;
			position: relative;

	}
	.button__text{
			position: relative;
			font-size: 32px;
			letter-spacing: 4px;
			color: var(--base_color);
			transition: all .3s ease;
	}

	.button::before{
			content: '';
			position: absolute;

			right: 20px;
			margin: auto 0;
			width: 24px;
			height: 24px;
			background: var(--base_color); 
			clip-path: path('M24,12.02c0-1.09-.75-1.71-.81-1.77L11.17,.45c-.91-.74-2.21-.56-2.91,.42-.69,.97-.52,2.37,.39,3.11l7.12,5.81-13.7-.02h0C.93,9.77,0,10.76,0,11.99c0,1.23,.93,2.22,2.07,2.22l13.7,.02-7.13,5.78c-.91,.74-1.09,2.13-.4,3.11,.41,.58,1.03,.88,1.65,.88,.44,0,.88-.15,1.25-.45l12.04-9.76c.07-.06,.82-.67,.82-1.77Z');
			transition: all ease .2s;
	}
	.button--bird .button__wrapper::before,
	.button--bird .button__wrapper::after{
			content: '';
			position: absolute;
			bottom: 0;
			width: 130px;
			height: 38px;
			background: var(--sub_color1);
			transition: all .5s ease;
			clip-path: path('M13.77,37.35L.25,16.6c-.87-1.33,.69-2.91,2-2.02l12.67,8.59c.81,.55,1.91,.14,2.18-.81l2.62-9.33c.39-1.4,2.34-1.42,2.76-.02l3.6,11.99c.33,1.11,1.74,1.4,2.47,.52L49.38,.52c.87-1.04,2.53-.42,2.53,.95V23.7c0,1.13,1.2,1.83,2.16,1.26l12.75-7.51c.85-.5,1.94,0,2.13,.98l1.5,7.6c.2,1.03,1.37,1.51,2.22,.92l17.74-12.3c1.09-.75,2.52,.25,2.21,1.55l-2.44,10.2c-.26,1.09,.74,2.06,1.8,1.75l30.8-9.04c1.37-.4,2.42,1.26,1.49,2.36l-9.07,10.66c-.83,.98-.1,2.49,1.17,2.42l12.12-.68c1.6-.09,2.12,2.15,.65,2.8l-2.73,1.21c-.18,.08-.38,.12-.58,.12H14.97c-.48,0-.93-.25-1.2-.65Z');
	}
	.button--bird .button__wrapper::before{
			left: 0;
	}
	.button--bird .button__wrapper::after{
			right: 0;
			transform: rotateY(180deg);
	}

	.button:hover .button__wrapper::before{
			transform: translateX(-12px);
	}
	.button:hover .button__wrapper::after{
			transform: rotateY(180deg) translateX(-12px);
	}
	.button:hover .button__text{
			letter-spacing: 6px;
	}
	.button:hover::before{
			right: 14px;
	}

	.birdBox{
			position: absolute;
			top: -54px;
			display: flex;
			justify-content:space-between;
			align-items: flex-end;
			width: 180px;
			height: 56px;
	}

	.bird{
			position: relative;
			width: 56px;
			height: 36px;
			box-sizing: border-box;
			border: solid 3px #000;
			background: var(--main_color);
			border-radius: var(--border_radius1);
			animation: sleep 1s ease infinite alternate;
			display: flex;
			justify-content: center;
	}
	.bird__face{
			position: absolute;
			top: 15px;
			width: 12px;
			height: 6px;
			background: var(--sub_color2);
			border-radius: 50% 50% 50% 50% / 78% 78% 22% 22%;
			transition: .2s;
	}
	.bird__face::before,
	.bird__face::after{
			content: '';
			position: absolute;
			top: -4px;
			width: 8px;
			height: 2px;
			border-radius: 4px;
			background: #000;
	}
	.bird__face::before{
			left: -5px;
	}
	.bird__face::after{
			right: -5px;
	}
	.bird::before{
			content: '';
			position: absolute;
			top: -12px;
			left: 22px;
			width: 12px;
			height: 12px;
			background: #000;
			clip-path: path('M10.23,3.32c-3.54,.63-5.72,2.51-7.02,4.23-.33-1.58-.34-3.54,.93-5.12,.52-.65,.41-1.59-.24-2.11C3.24-.19,2.29-.08,1.77,.57c-3.82,4.77-.31,11.11-.13,11.42,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0-.01-.02,2.49,.04,2.52,0,.1-.14,1.54-4.82,6.59-5.71,.82-.14,1.37-.92,1.22-1.74s-.94-1.36-1.75-1.21Z');
	}
	.button:hover .wakeup{
			animation: wakeup .2s ease;
			animation-fill-mode: forwards;
	}
	.button:hover .wakeup .bird__face{
			top: 20px;
	}
	.button:hover .wakeup .bird__face::before,
	.button:hover .wakeup .bird__face::after{
			animation: eye 5s linear infinite;
	}

	.button:hover .wakeup:nth-child(2) .bird__face::before,
	.button:hover .wakeup:nth-child(2) .bird__face::after{
			animation: eye_2 5s linear infinite;
	}

	@keyframes wakeup{
			0%  {
					height: 32px;
					border-radius: var(--border_radius2);
			}
			100%{
					height: 56px;
					border-radius: var(--border_radius3);
			}
	}

	@keyframes eye {
			0%{
					top: -6px;
					width: 6px;
					height: 6px;
			}
			30%{
					top: -6px;
					width: 6px;
					height: 6px;
			}
			32%{
					top: -4px;
					width: 8px;
					height: 2px;
			}
			34%{
					top: -6px;
					width: 6px;
					height: 6px;
			}
			70%{
					top: -6px;
					width: 6px;
					height: 6px;
			}
			72%{
					top: -4px;
					width: 8px;
					height: 2px;
			}
			74%{
					top: -6px;
					width: 6px;
					height: 6px;
			}
			76%{
					top: -4px;
					width: 8px;
					height: 2px;
			}
			78%{
					top: -6px;
					width: 6px;
					height: 6px;
			}
			100%{
					top: -6px;
					width: 6px;
					height: 6px;
			}
	}

	@keyframes eye_2 {
			0%{
					top: -6px;
					width: 6px;
					height: 6px;
			}
			10%{
					transform: translateX(0);
			}
			12%{
					transform: translateX(3px);
			}
			20%{
					top: -6px;
					width: 6px;
					height: 6px;
			}
			22%{
					top: -4px;
					width: 8px;
					height: 2px;
			}
			24%{
					top: -6px;
					width: 6px;
					height: 6px;
			}
			25%{
					transform: translateX(3px);
			}
			27%{
					transform: translateX(0);
			}
			74%{
					top: -6px;
					width: 6px;
					height: 6px;
					transform: translateX(0);
			}
			76%{
					top: -4px;
					width: 8px;
					height: 2px;
					transform: translateX(3px);
			}
			78%{
					top: -6px;
					width: 6px;
					height: 6px;
			}
			80%{
					top: -4px;
					width: 8px;
					height: 2px;
			}
			82%{
					top: -6px;
					width: 6px;
					height: 6px;
			}
			85%{
					transform: translateX(3px);
			}
			87%{
					transform: translateX(0);
			}
			100%{
					top: -6px;
					width: 6px;
					height: 6px;
					transform: translateX(0);
			}
			
	}
	@keyframes sleep{
			0%  {
					height: 36px;
					border-radius: var(--border_radius1);
			}
			100%{
					height: 32px;
					border-radius: var(--border_radius2);
			}
	}
	.item{
		width: 50%;
		line-height: 50rpx;
		border: 2rpx dashed #ccc;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.clean{
		height: 130rpx;
    line-height: 130rpx;
    width: 130rpx;
    background-color: #f4cf47;
    border-radius: 50%;
    word-wrap: break-word;
    font-size: 20rpx;
    color: #000;
    text-align: center;
	}




</style>